<template> 
    <div class="back-to-top" @click="backToTop" v-show="showReturnToTop">
        <i :class="[bttOption.iClass]" :style="{color:bttOption.iColor,'font-size':bttOption.iFontsize}" class=" iconfont top_icon" name="backToTop" scale="10">&#xe615;</i>
        <span class="tips" :class="[bttOption.iPos]" :style="{color:bttOption.textColor}" v-show="showTooltips">{{bttOption.text}}</span>
    </div>
</template> 
 
<script>
// 引入动画过渡的实现 
import { scrollIt } from '../../../store/modules/public/backToTop.js' 
export default {
    name: 'backToTop',
    props: {
        // 文本提示        
        text: { 
            type: String
        },
        // 文本颜色        
        textColor: { 
            type: String,
            default: '#f00'
        },
        // 文本位置        
        iPos: { 
            type: String,
            default: 'right'
        },
        // 图标形状        
        iClass: { 
            type: String,
            default: 'fzicon fz-ad-fanhuidingbu1'
        },
        // 图标颜色        
        iColor: { 
            type: String,
            default: '#f00'
        },
        // 图标大小        
        iFontsize: { 
            type: String,
            default: '0.8rem'
        },
        // 默认在哪个视图显示返回按钮        
        pageY: { 
            type: Number,
            default: 400
        },
        // 过渡动画名称        
        transitionName: { 
            type: String,
            default: 'linear'
        }
    },
    data: function () {
        return {
            showTooltips: false,
            showReturnToTop: false
        }
    },
    computed: {
        bttOption () {
            return {
                text: this.text,
                textColor: this.textColor,
                iPos: this.iPos,
                iClass: this.iClass,
                iColor: this.iColor,
                iFontsize: this.iFontsize
            }
        }
    },
    methods: {
        currentPageYOffset () {
            // 判断滚动区域大于多少的时候显示返回顶部的按钮
            window.pageYOffset > this.pageY ? this.showReturnToTop = true : this.showReturnToTop = false
        },
        backToTop () {
            scrollIt(0, 1500, this.transitionName, this.currentPageYOffset)
        }
    },
    created () {
        window.addEventListener('scroll', this.currentPageYOffset)
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.currentPageYOffset)
    }
}
</script>
 
<style>
    @import './css/backToTop.css';
</style> 